<div class="card card-custom h-100">
    <div class="card-header align-items-center border-0">
        <div class="card-title">
            <span class="card-icon">
                <i class="far fa-clock text-danger"></i>
            </span>
            <h3 class="card-label text-danger">
                {{ "SubscriptionExpiringTenants" | localize }}
                <small class="text-muted"
                    *ngIf="expiringTenantsData">
                    {{
                        "ExpiringTenantsHelpText"
                            | localize
                                : expiringTenantsData.subscriptionEndAlertDayCount
                                : expiringTenantsData.maxExpiringTenantsShownCount
                    }}
                </small>
            </h3>
        </div>
    </div>
    <div class="card-body"
        [perfectScrollbar]>
        <div class="scroller chart">
            <div class="primeng-datatable-container expiring-tenants-table"
                [busyIf]="primengTableHelper.isLoading"
                *ngIf="!dataLoading">
                <p-table #ExpiringTenantsTable
                    [value]="expiringTenantsData.expiringTenants"
                    rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                    [paginator]="false"
                    [lazy]="false"
                    [responsive]="primengTableHelper.isResponsive">
                    <ng-template pTemplate="header">
                        <tr>
                            <th>{{ "TenantName" | localize }}</th>
                            <th>{{ "RemainingDay" | localize }}</th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body"
                        let-record="$implicit">
                        <tr>
                            <td>
                                <span class="p-column-title">{{
                                    "TenantName" | localize
                                }}</span>
                                {{ record.tenantName }}
                            </td>
                            <td>
                                <span class="p-column-title">{{
                                    "RemainingDay" | localize
                                }}</span>
                                {{ record.remainingDayCount }}
                            </td>
                        </tr>
                    </ng-template>
                </p-table>
                <div class="primeng-no-data"
                    *ngIf="expiringTenantsData?.expiringTenants?.length == 0">
                    {{ "NoData" | localize }}
                </div>
            </div>
        </div>
        <div class="scroller-footer">
            <div class="btn-arrow-link pull-right">
                <a href="javascript:;"
                    class="see-all-expiring-tenants"
                    (click)="gotoAllExpiringTenants()">
                    {{ "SeeAllRecords" | localize }}
                </a>
                <i class="icon-arrow-right"></i>
            </div>
        </div>
    </div>
</div>